<template>
	<view class="content">
		<view class="pic-swiper">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="item in picarr" :key="item.picurl" @click="gopage(item.page)">
					<view class="swiper-item">
						 <image :src="item.picurl" mode="widthFix" style="width: 100%;"></image>
						<!-- <image src="../../static/swipe02.png" mode="widthFix" style="width: 100%;"></image> -->
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<div class="top-nav">
			<div class="top-nav-i" @click="gopage('study/study')">
			
			</div>
		
			<div class="top-nav-i" @click="gopage('send/send')">
			
			</div>
		</div>
		<div class="placelist-top">
			附近消毒信息
		</div>
		
		<div class="placelist-nodata" v-if="nodata">
			<image class="placelist-nodata-pic" src="https://ae01.alicdn.com/kf/Hc11486b5f0844f0dbc88c55a239f88290.png" mode="widthFix"></image>
			<div class="placelist-nodata-msg" >你附近还没人发布消毒信息</div>
			<div class="btn" @click="gopage('send/send')">发布</div>
		</div>
		
		<div class="placelist">
			<div class="place-i" v-for="item in placelist" :key="item._id" @click="gopage('place/place?id='+item._id)">
				<image class="place-logo" :src="item.photo" mode="aspectFill" ></image>
				<div class="place-info">
					<div class="place-title" >
						{{item.name}}
					</div>
					<div class="place-user" v-if="item.lastusername">
						消毒人:{{item.lastusername}}
					</div>
					<div class="place-bottom" v-if="item.lasttime">
						<div class="place-time">消毒时间:{{DistanceTime(item.lasttime)}}</div>
						<div class="place-distance">{{GetDistance2(item.distance)}}</div>
					</div>
					<div class="place-user" v-else>没有消毒</div>
				</div>
			</div>
		</div>
		
		
	</view>
</template>

<script>
	// {
	// 	id:2,
	// 	name:'青柠泰泰国菜(运河城店) ',
	// 	photo:'https://img.meituan.net/msmerchant/de4cc2588c1c2eb8a0305f137fe49d4b67312.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0',
	// 	lat:116.595775,
	// 	lng:35.413127,
	// 	user:'孔江连',
	// 	userid:2,
	// 	lasttime:1580868105353
	// },{
	// 	id:3,
	// 	name:'老街小虎川小馆(万达店)',
	// 	photo:'https://img.meituan.net/msmerchant/44c930eebc95c2a615307c725bbb874c534538.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0',
	// 	lat:116.595775,
	// 	lng:35.413127,
	// 	user:'李裕成',
	// 	userid:2,
	// 	lasttime:1580868105353
	// },{
	// 	id:4,
	// 	name:'满园春饼',
	// 	photo:'http://p1.meituan.net/dealwatera/1eaaa5b619873558e1e042e528512ba4357906.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0',
	// 	lat:116.609461,
	// 	lng:35.414326,
	// 	user:'章盛玉',
	// 	userid:2,
	// 	lasttime:1580868105353
	// }
	const db = wx.cloud.database()
	const _ = db.command
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				nodata:false,
				picarr:[],
				placelist:[],
				user:{
					lat:116.591741,
					lng:35.414782
				}
			}
		},onPullDownRefresh(){
			console.log('下拉刷新')
			this.Getdata(function(){
				
				uni.stopPullDownRefresh()
			})
			            
			  
		},
		onLoad() {
			let _that=this
			db.collection('config').get().then(res=>{
				console.log(res.data[0].indexpic)
				this.picarr=res.data[0].indexpic
			})
			
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
			       _that.user.lng=res.longitude
			       _that.user.lat=res.latitude
				   console.log('定位',res)
					_that.Getdata()
				 }
			})
		},
		methods: {
			Getdata(callback){
				let _that=this
				
				wx.cloud.callFunction({
				  name: 'hserve',
				  data: {
					name:'index',
					lat:_that.user.lat,
					lng:_that.user.lng
				  }
				}).then(res=>{
					console.log(res.result.list)
					_that.placelist=res.result.list
					if(res.result.list.length==0){
						_that.nodata=true
					}else{
						_that.nodata=false
					}
					
					_that.$localStorage.setItem('list',JSON.stringify(res.result.list))
					
					if(callback){
						callback()
					}
					
				})
			},
			GetDistance(lat1,lng1){
				let radLat1 = lat1*Math.PI / 180.0;
				let radLat2 = this.user.lat*Math.PI / 180.0;
				let a = radLat1 - radLat2;
				let  b = lng1*Math.PI / 180.0 - this.user.lng*Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
				Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
				s = s *6378.137 ;// EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				
				if(s<1){
					return s*1000+'米'
				}else{
					return s+'km'
				}
				
			},GetDistance2(i){
				if(i>1000){
					return ((i)/1000).toFixed(2)+'km'
				}else{
					return parseInt(i)+'米'
				}
				
				
			},DistanceTime(oldtime){
				console.log('time')
				let s=(new Date().getTime()-oldtime)/1000
				if(s<=300){
					return "刚刚"
				}else if(s<=3600){
					return parseInt(s/60)+"分钟前"
				}else{
					return parseInt(s/60/60)+"小时前"
				}
				
			}
			
		}
	}
</script>

<style lang="stylus">
	.content
		font-size 26rpx
		font-weight 400
		color rgba(51,51,51,1)
		background-color  rgb(236,242,254)
		min-height 100vh
	
	
	.placelist-top
		line-height 60rpx
		text-align center
		background-color #014a99
		color #FFFFFF
	
	
	.placelist-nodata
		text-align center
		height 550rpx
		display flex
		flex-direction column
		justify-content center
		align-items center
		.placelist-nodata-pic
			width 200rpx
		
		
		.placelist-nodata-msg
			line-height 80rpx
			font-size 36rpx
			padding-top 30rpx
		
		
		.btn
			margin-top 30rpx
			background-color #014a99
			color #FFFFFF
			width 300rpx
			line-height 80rpx
			font-size 36rpx
		
	
	
	.placelist
		.place-i
			height 200rpx
			display flex
			padding 30rpx 32rpx 30rpx 32rpx
			border-bottom 2px solid rgba(245,245,245,1)
			color #666666
			background-color #FFFFFF
			.place-logo
				height 200rpx
				width 200rpx
				flex-shrink 0
				
			
			.place-info
				flex 1
				display flex
				flex-direction column
				overflow hidden
				padding-left 40rpx
				line-height 60rpx
				.place-title
					font-size 36rpx
					line-height 78rpx
					overflow hidden
					text-overflow ellipsis
					white-space nowrap
				.place-bottom
					display flex
					justify-content space-between
				
	.pic-swiper
		height 400rpx
		.swiper
			height 100%
		
	
	.top-nav
		height 130rpx
		display flex
		background-color #f0f0f0
		color #FFFFFF
		background-image url(https://ae01.alicdn.com/kf/Hc211fd2f9c15412da9bb69758da7830ei.png)
		background-size cover
		.top-nav-i
			flex 1
			height 100%
			display flex
			align-items center
			.top-nav-right
				flex 1
			.top-nav-pic
				width 130rpx
				height 130rpx
				display flex
				align-items center
				box-sizing border-box
				padding-left 30rpx
				.top-nav-pic-m
					width 80rpx
					height 80rpx
				
</style>
